<template>
  <div id="home-container" class="bilibili-home content-container">
    <!-- 使用PullRefresh组件 -->
    <PullRefresh :refreshing="loadingStates.refreshing" @refresh="refreshData">
    
    <!-- 轮播图组件 -->
    <Carousel :items="carouselItems" @carousel-click="handleCarouselClick" />
    
    <!-- 热门标签组件 -->
    <HotTags :tags="hotTags" @tag-click="handleTagClick" />
    
    <!-- 主内容布局 -->
    <div class="main-layout content-wrapper">
      <!-- 左侧内容 -->
      <div class="content-left">
        <!-- 推荐视频 -->
        <VideoSection 
          title="推荐视频" 
          :videos="recommendedVideos" 
          :loading="false"
          @video-click="handleVideoClick"
          @more-click="handleMoreClick('recommended')"
        />
        
        <!-- 热门视频 -->
        <VideoSection 
          title="热门视频" 
          :videos="hotVideos" 
          :active-tab="activeHotTab"
          :loading="loadingStates.hot"
          :show-tabs="true"
          :tabs="['全站', '动画', '音乐', '游戏']"
          @video-click="handleVideoClick"
          @tab-switch="switchHotTab"
        />
        
        <!-- 最新视频 -->
        <VideoSection 
          title="最新投稿" 
          :videos="latestVideos" 
          :loading="false"
          @video-click="handleVideoClick"
          @more-click="handleMoreClick('latest')"
        />
      </div>
      
      <!-- 右侧边栏 -->
      <div class="sidebar-right">
        <!-- 排行榜组件 -->
        <RankingBoard :items="rankingList" @item-click="handleRankingItemClick" @view-full-ranking="handleViewFullRanking" />
        
        <!-- 推荐UP主组件 -->
        <RecommendedUp :up-list="recommendedUp" @up-click="handleUpClick" @follow-up="handleFollowUp" />
      </div>
    </div>
    
    <!-- 返回顶部按钮 -->
    <button 
      v-if="showBackToTop" 
      class="back-to-top" 
      title="返回顶部"
      @click="scrollToTop"
    >
      ↑
    </button>
    </PullRefresh>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import VideoList from '../components/VideoList.vue'
import Carousel from '../components/Carousel.vue'
import HotTags from '../components/HotTags.vue'
import RankingBoard from '../components/RankingBoard.vue'
import RecommendedUp from '../components/RecommendedUp.vue'
import VideoSection from '../components/VideoSection.vue'
import PullRefresh from '../components/PullRefresh.vue'
import { getUserAgeGroup, filterContentByAge, generatePersonalizedRecommendations, getAgeGroupPreferences, AGE_GROUPS } from '../services/ageRecommendationService.js'
// 导入本地图片资源
import animeImage from '../assets/动漫.png'
import wukongImage from '../assets/悟空.jpg'
import jayChouImage from '../assets/周杰伦.png'
import techDigitalImage from '../assets/数码科技展.png'
import foodFestivalImage from '../assets/二次元美食节.png'
import blackMythImage from '../assets/黑神话.jpeg'
import demonSlayerImage from '../assets/鬼灭之刃.jpeg'
import visionLogo from '@/assets/icons/world-vision-logo.svg'
import logoImage from '@/assets/logo.png'
// 导入背景特效工具

// 导入防抖工具函数
const debounce = (func, wait) => {
  let timeout
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}

export default {
  name: 'HomeView',
  components: {
    VideoList,
    Carousel,
    HotTags,
    RankingBoard,
    RecommendedUp,
    VideoSection,
    PullRefresh,
  },
  
  provide() {
    return {
      // 提供背景效果控制方法给子组件
      updateBackgroundEffect: this.updateBackgroundEffect,
      getCurrentEffect: this.getCurrentEffect,
    }
  },
  setup() {
    const router = useRouter()
    return { router }
  },
  data() {
    // 创建一个返回本地图片的辅助函数
    const getLocalImage = (type) => animeImage
    
    // 获取当前登录用户信息
    const getCurrentUser = () => {
      try {
        const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
        if (isLoggedIn) {
          const currentUsername = localStorage.getItem('currentUsername');
          if (currentUsername) {
            const registeredUsers = JSON.parse(localStorage.getItem('registeredUsers') || '[]');
            return registeredUsers.find(user => user.username === currentUsername);
          }
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
      return null;
    };
    
    return {
      visionLogo: visionLogo,
      currentUser: getCurrentUser(),
      // 根据用户登录状态和年龄获取热门标签
        get hotTags() {
          // 如果未登录或没有年龄信息，返回通用标签
          if (!this.currentUser || !this.currentUser.age) {
            return ['鬼灭之刃', '原神', '英雄联盟', 'AI绘画', '美食探店',
                  '生活vlog', '学习方法', '旅行日记', '舞蹈翻跳', '电子音乐',
                  '新番剧', '音乐'];
          }
          
          // 使用年龄推荐服务获取适合的标签
          const ageGroupKey = getUserAgeGroup(this.currentUser.age);
          const ageGroupName = AGE_GROUPS[ageGroupKey]?.name;
          const preferences = getAgeGroupPreferences(ageGroupName);
          // 返回适合的标签（这里使用分类作为标签）
          return preferences.categories;
        },
      carouselItems: [
        { id: 1, image: animeImage, imageBlur: animeImage, title: '动画嘉年华2024', description: '与你一起探索二次元世界的魅力，汇聚最新动画作品和精彩活动', link: '/anime', badge: '重磅' },
        { id: 2, image: wukongImage, imageBlur: wukongImage, title: '游戏嘉年华2024', description: '《黑神话：悟空》等全球游戏大作最新资讯与试玩体验', link: '/game', badge: '热门' },
        { id: 3, image: jayChouImage, imageBlur: jayChouImage, title: '音乐盛典', description: '周杰伦经典重现，演唱《七里香》《最伟大的作品》等代表作', link: '/music', badge: '精选' },
        { id: 4, image: techDigitalImage, imageBlur: techDigitalImage, title: '科技数码展', description: '最新数码产品体验，AI绘画、虚拟现实技术前沿展示', link: '/tech', badge: '新品' },
        { id: 5, image: foodFestivalImage, imageBlur: foodFestivalImage, title: '二次元美食节', description: '14:00舞蹈表演/16:00美食比赛/18:00角色巡游', link: '/food', badge: '人气' },
      ],
      
      // 根据用户年龄过滤和个性化推荐的视频
      get recommendedVideos() {
        // 如果未登录或没有年龄信息，返回所有视频
        if (!this.currentUser || !this.currentUser.age) {
          return this.allRecommendedVideos;
        }
        
        // 首先过滤不适合该年龄段的内容
        const filteredVideos = filterContentByAge(this.allRecommendedVideos, this.currentUser.age);
        
        // 然后生成个性化推荐
        const personalizedVideos = generatePersonalizedRecommendations(
          filteredVideos,
          this.currentUser.age,
          this.currentUser.interests || []
        );
        
        return personalizedVideos;
      },
      // 热门标签切换状态
      activeHotTab: '全站',
      // 加载状态
      loadingStates: {
        hot: false,
        loadingMore: false,
        refreshing: false,
      },
      // 返回顶部按钮显示状态
    showBackToTop: false,

    // 原始推荐视频数据
    allRecommendedVideos: [
        {
          id: 1,
          title: '【黑神话：悟空】全流程实况解说，震撼游戏体验与深度剧情分析',
          thumbnail: blackMythImage,
          thumbnailBlur: blackMythImage,
          duration: 820,
          views: 235000,
          likes: 18600,
          bulletCount: 5400,
          author: '游戏实况大神',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: true,
          authorLevel: 7,
          date: '1天前',
          tags: ['黑神话：悟空', '游戏', '实况'],
          badge: '热门',
          coverBadge: '年度巨作',
          featured: true,
        },
        {
          id: 2,
          title: '【鬼灭之刃】无限城篇结局解析，炭治郎的抉择与命运走向',
          thumbnail: demonSlayerImage,
          thumbnailBlur: demonSlayerImage,
          duration: 525,
          views: 83000,
          likes: 7200,
          bulletCount: 2100,
          author: '动漫解析君',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: true,
          authorLevel: 6,
          date: '1周前',
          tags: ['鬼灭之刃', '动漫', '解析'],
          qualityBadge: '高清',
          commentCount: 1245,
        },
        {
          id: 3,
          title: '【英雄联盟】S14全球总决赛精彩集锦，T1战队夺冠瞬间回顾',
          thumbnail: '/src/assets/T1.jpg',
          thumbnailBlur: '/src/assets/T1.jpg',
          duration: 750,
          views: 157000,
          likes: 12500,
          bulletCount: 4800,
          author: '电竞风云',
          authorAvatar: '/src/assets/悟空.jpg',
          authorOfficial: true,
          authorLevel: 7,
          date: '2周前',
          tags: ['英雄联盟', '电竞', '比赛'],
          badge: '精选',
          highlight: true,
        },
        {
          id: 4,
          title: '【美食】15分钟搞定米其林级别的意式肉酱面，大厨独家秘方公开',
          thumbnail: '/src/assets/意式肉酱面.jpg',
          thumbnailBlur: '/src/assets/意式肉酱面.jpg',
          duration: 375,
          views: 92000,
          likes: 8300,
          bulletCount: 2600,
          author: '美食达人',
          authorAvatar: '/src/assets/悟空.jpg',
          authorOfficial: true,
          authorLevel: 6,
          date: '4天前',
          tags: ['美食', '烹饪', '意大利面'],
          qualityBadge: '超清',
          stepByStep: true,
        },
        {
          id: 5,
          title: '【AI绘画】零基础入门Midjourney，10分钟生成绝美插画与商业应用',
          thumbnail: '/src/assets/Midjourney.jpeg',
          thumbnailBlur: '/src/assets/Midjourney.jpeg',
          duration: 600,
          views: 135000,
          likes: 11200,
          bulletCount: 3800,
          author: 'AI艺术',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: false,
          authorLevel: 4,
          date: '2024-05-11',
          tags: ['AI绘画', 'Midjourney', '插画', '教程'],
          badge: '新番',
          materials: true,
        },
        {
          id: 6,
          title: '【旅行】日本东京7日游完全攻略，省钱又好玩的隐藏景点推荐',
          thumbnail: '/src/assets/东京七日游.jpeg',
          thumbnailBlur: '/src/assets/东京七日游.jpeg',
          duration: 840,
          views: 112000,
          likes: 8800,
          bulletCount: 2500,
          author: '旅行日记',
          authorAvatar: '/src/assets/悟空.jpg',
          authorOfficial: true,
          authorLevel: 6,
          date: '2024-05-06',
          tags: ['旅行', '日本', '东京', '攻略'],
          qualityBadge: '4K',
          mapIncluded: true,
        },
        {
          id: 7,
          title: '【音乐】周杰伦2024嘉年华演唱会全程回顾，经典曲目重现',
          thumbnail: '/src/assets/周杰伦.png',
          thumbnailBlur: '/src/assets/周杰伦.png',
          duration: 1200,
          views: 186000,
          likes: 14500,
          bulletCount: 6800,
          author: '音乐现场',
          authorAvatar: '/src/assets/黑悟空.jpg',
          authorOfficial: true,
          authorLevel: 8,
          date: '3天前',
          tags: ['周杰伦', '演唱会', '音乐'],
          badge: '独家',
          audioQuality: '高音质',
        },
        {
          id: 8,
          title: '【生活】2024年最新家居收纳技巧，让你的小户型空间翻倍',
          thumbnail: '/src/assets/科技数码展宣传图.jpg',
          thumbnailBlur: '/src/assets/科技数码展宣传图.jpg',
          duration: 480,
          views: 76000,
          likes: 6800,
          bulletCount: 1800,
          author: '生活整理师',
          authorAvatar: '/src/assets/黑悟空.jpg',
          authorOfficial: false,
          authorLevel: 5,
          date: '1周前',
          tags: ['家居', '收纳', '生活技巧'],
          qualityBadge: '高清',
          practical: true,
        },
      ],
      // 热门视频数据
      hotVideos: [
        {
          id: 7,
          title: '【舞蹈】超火《极乐净土》翻跳，一键回到2016年的经典回忆',
          thumbnail: '/src/assets/鬼灭之刃.jpeg',
          thumbnailBlur: '/src/assets/鬼灭之刃.jpeg',
          duration: 480,
          views: 203000,
          likes: 15600,
          bulletCount: 6800,
          author: '舞蹈工作室',
          authorAvatar: '/src/assets/黑悟空.jpg',
          authorOfficial: true,
          authorLevel: 6,
          date: '2024-05-11',
          tags: ['舞蹈', '极乐净土', '翻跳'],
          qualityBadge: '超清',
          danceCover: true,
          performance: '专业',
        },
        {
          id: 8,
          title: '【音乐】原创歌曲《春日漂流》，治愈你的心灵与音乐创作过程揭秘',
          thumbnail: '/src/assets/黑悟空.jpg',
          thumbnailBlur: '/src/assets/黑悟空.jpg',
          duration: 300,
          views: 178000,
          likes: 14200,
          bulletCount: 5200,
          author: '音乐创作人',
          authorAvatar: '/src/assets/悟空.jpg',
          authorOfficial: false,
          authorLevel: 5,
          date: '2024-05-08',
          tags: ['音乐', '原创', '治愈'],
          badge: '音乐',
          qualityBadge: '无损',
          behindTheScenes: true,
        },
        {
          id: 9,
          title: '【游戏】《黑神话：悟空》最新实机演示深度解析，开发细节曝光',
          thumbnail: '/src/assets/二次元美食节海报_3.jpg',
          thumbnailBlur: '/src/assets/二次元美食节海报_3.jpg',
          duration: 900,
          views: 250000,
          likes: 19800,
          bulletCount: 8600,
          author: '游戏评测室',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: true,
          authorLevel: 7,
          date: '2024-05-12',
          tags: ['游戏', '黑神话悟空', '解析'],
          badge: '热门',
          qualityBadge: '4K',
          exclusive: true,
        },
        {
          id: 10,
          title: '【科技】iPhone 16 Pro Max深度评测，对比15 Pro值得升级吗？',
          thumbnail: '/src/assets/周杰伦.png',
          thumbnailBlur: '/src/assets/周杰伦.png',
          duration: 660,
          views: 168000,
          likes: 13500,
          bulletCount: 4800,
          author: '科技前沿',
          authorAvatar: '/src/assets/悟空.jpg',
          authorOfficial: true,
          authorLevel: 6,
          date: '2024-05-09',
          tags: ['科技', 'iPhone', '评测'],
          qualityBadge: '高清',
          comparison: true,
        },
        {
          id: 11,
          title: '【学习】高效学习方法分享，让你的学习效率提升300%的实战技巧',
          thumbnail: '/src/assets/悟空.jpg',
          thumbnailBlur: '/src/assets/悟空.jpg',
          duration: 540,
          views: 145000,
          likes: 11200,
          bulletCount: 3500,
          author: '学霸养成记',
          authorAvatar: '/src/assets/二次元美食节海报_3.jpg',
          authorOfficial: false,
          authorLevel: 5,
          date: '2024-05-05',
          tags: ['学习', '效率', '方法'],
          badge: '精选',
          studyPlan: true,
          materialsIncluded: true,
        },
        {
          id: 12,
          title: '【生活】10个实用生活小技巧，解决90%的日常烦恼',
          thumbnail: '/src/assets/悟空.jpg',
          thumbnailBlur: '/src/assets/悟空.jpg',
          duration: 420,
          views: 189000,
          likes: 16200,
          bulletCount: 6200,
          author: '生活妙招',
          authorAvatar: '/src/assets/黑悟空.jpg',
          authorOfficial: true,
          authorLevel: 6,
          date: '2024-05-07',
          tags: ['生活', '技巧', '实用'],
          qualityBadge: '超清',
          timeSaving: true,
        },
        {
          id: 13,
          title: '【电影】《流浪地球3》最新预告解析，剧情走向预测与彩蛋盘点',
          thumbnail: '/src/assets/悟空.jpg',
          thumbnailBlur: '/src/assets/悟空.jpg',
          duration: 680,
          views: 215000,
          likes: 17800,
          bulletCount: 7200,
          author: '影视解说',
          authorAvatar: '/src/assets/黑悟空.jpg',
          authorOfficial: true,
          authorLevel: 7,
          date: '2024-05-13',
          tags: ['电影', '流浪地球', '预告'],
          badge: '独家',
          spoilerWarning: true,
        },
        {
          id: 14,
          title: '【健身】30分钟居家燃脂训练，不用器械也能练出好身材',
          thumbnail: '/src/assets/周杰伦.png',
          thumbnailBlur: '/src/assets/周杰伦.png',
          duration: 360,
          views: 125000,
          likes: 9800,
          bulletCount: 3200,
          author: '健身教练Mike',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: false,
          authorLevel: 6,
          date: '2024-05-10',
          tags: ['健身', '燃脂', '居家'],
          qualityBadge: '高清',
          noEquipment: true,
          beginnerFriendly: true,
        },
      ],
      // 最新视频数据
      latestVideos: [
        {
          id: 13,
          title: '【开箱】华为Mate 70 Pro首发开箱体验，昆仑玻璃2.0到底有多强？',
          thumbnail: '/src/assets/黑悟空.jpg',
          thumbnailBlur: '/src/assets/黑悟空.jpg',
          duration: 600,
          views: 56000,
          likes: 4200,
          bulletCount: 1200,
          author: '数码测评',
          authorAvatar: '/src/assets/悟空.jpg',
          authorOfficial: true,
          authorLevel: 5,
          date: '2024-05-13',
          tags: ['科技', '华为', '开箱'],
          badge: '新',
          qualityBadge: '4K',
          exclusiveContent: true,
          firstLook: true,
        },
        {
          id: 14,
          title: '【绘画】水彩风景画教程，零基础也能画出美丽风景，只需3个技巧',
          thumbnail: '/src/assets/黑悟空.jpg',
          thumbnailBlur: '/src/assets/黑悟空.jpg',
          duration: 800,
          views: 32000,
          likes: 2800,
          bulletCount: 800,
          author: '艺术教室',
          authorAvatar: '/src/assets/黑悟空.jpg',
          authorOfficial: false,
          authorLevel: 4,
          date: '2024-05-13',
          tags: ['绘画', '水彩', '教程'],
          qualityBadge: '高清',
          stepByStepGuide: true,
          materialsListed: true,
        },
        {
          id: 15,
          title: '【运动】15分钟居家健身，告别大肚腩，附详细动作分解',
          thumbnail: '/src/assets/周杰伦.png',
          thumbnailBlur: '/src/assets/周杰伦.png',
          duration: 900,
          views: 45000,
          likes: 3600,
          bulletCount: 1000,
          author: '健身教练',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: true,
          authorLevel: 5,
          date: '2024-05-13',
          tags: ['运动', '健身', '居家'],
          qualityBadge: '超清',
          noEquipmentNeeded: true,
          beginnerFriendly: true,
        },
        {
          id: 16,
          title: '【动画】《进击的巨人》最终季完结纪念混剪，那些感动我们的瞬间',
          thumbnail: '/src/assets/悟空.jpg',
          thumbnailBlur: '/src/assets/悟空.jpg',
          duration: 540,
          views: 67000,
          likes: 5800,
          bulletCount: 1800,
          author: '动漫混剪',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: false,
          authorLevel: 5,
          date: '2024-05-13',
          tags: ['动画', '进击的巨人', '混剪'],
          badge: '动画',
          qualityBadge: '4K',
          spoilerWarning: true,
          emotionalContent: true,
        },
        {
          id: 17,
          title: '【烹饪】零基础学做粤菜，叉烧肉教程，30年大厨秘方公开',
          thumbnail: '/src/assets/黑悟空.jpg',
          thumbnailBlur: '/src/assets/黑悟空.jpg',
          duration: 720,
          views: 38000,
          likes: 3200,
          bulletCount: 900,
          author: '美食厨房',
          authorAvatar: '/src/assets/悟空.jpg',
          authorOfficial: true,
          authorLevel: 4,
          date: '2024-05-13',
          tags: ['美食', '粤菜', '叉烧肉', '教程'],
          qualityBadge: '高清',
          authenticRecipe: true,
          easyToFollow: true,
        },
        {
          id: 18,
          title: '【职场】程序员如何提升职场竞争力？5年经验分享，晋升加薪必备',
          thumbnail: '/src/assets/周杰伦.png',
          thumbnailBlur: '/src/assets/周杰伦.png',
          duration: 660,
          views: 52000,
          likes: 4500,
          bulletCount: 1500,
          author: '职场导师',
          authorAvatar: '/src/assets/黑悟空.jpg',
          authorOfficial: false,
          authorLevel: 6,
          date: '2024-05-13',
          tags: ['职场', '程序员', '经验分享'],
          badge: '经验',
          careerAdvice: true,
          skillDevelopment: true,
        },
        {
          id: 21,
          title: '【Vlog】周末一日游，探访城市隐藏美食地图，第3期',
          thumbnail: '/src/assets/悟空.jpg',
          thumbnailBlur: '/src/assets/悟空.jpg',
          duration: 540,
          views: 28000,
          likes: 2400,
          bulletCount: 700,
          author: '城市探险家',
          authorAvatar: '/src/assets/悟空.jpg',
          authorOfficial: false,
          authorLevel: 4,
          date: '2024-05-13',
          tags: ['Vlog', '美食', '城市'],
          badge: 'Vlog',
          series: true,
          localFood: true,
        },
        {
          id: 22,
          title: '【宠物】如何训练你的狗狗学会5个基本指令，科学训练无体罚',
          thumbnail: '/src/assets/黑悟空.jpg',
          thumbnailBlur: '/src/assets/黑悟空.jpg',
          duration: 480,
          views: 35000,
          likes: 3100,
          bulletCount: 900,
          author: '宠物训练师',
          authorAvatar: '/src/assets/黑悟空.jpg',
          authorOfficial: true,
          authorLevel: 5,
          date: '2024-05-13',
          tags: ['宠物', '狗狗', '训练'],
          qualityBadge: '超清',
          positiveReinforcement: true,
          expertAdvice: true,
        },
        {
          id: 23,
          title: '【音乐】周杰伦新歌《最伟大的作品》钢琴版教学，附曲谱',
          thumbnail: '/src/assets/周杰伦.png',
          thumbnailBlur: '/src/assets/周杰伦.png',
          duration: 420,
          views: 41000,
          likes: 3800,
          bulletCount: 1100,
          author: '钢琴教学',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: true,
          authorLevel: 6,
          date: '2024-05-13',
          tags: ['音乐', '钢琴', '周杰伦'],
          badge: '音乐',
          sheetMusicIncluded: true,
          slowPlayback: true,
        },
        {
          id: 24,
          title: '【游戏】《黑神话：悟空》战斗系统深度解析，悟空的72变如何实现',
          thumbnail: '/src/assets/周杰伦.png',
          thumbnailBlur: '/src/assets/周杰伦.png',
          duration: 780,
          views: 72000,
          likes: 6500,
          bulletCount: 2100,
          author: '游戏分析师',
          authorAvatar: '/src/assets/周杰伦.png',
          authorOfficial: true,
          authorLevel: 7,
          date: '2024-05-13',
          tags: ['游戏', '黑神话悟空', '解析'],
          badge: '独家',
          qualityBadge: '4K',
          gameplayAnalysis: true,
          technicalBreakdown: true,
        },
      ],
      // 排行榜数据
      rankingList: [
        {
          id: 1,
          rank: 1,
          title: '【游戏】《黑神话：悟空》最新实机演示解析，开发细节全揭秘',
          views: '250万',
          trend: 'up',
          changeCount: 2,
          duration: '15:20',
          author: '游戏评测室',
          category: '游戏',
          hotTag: '热门',
        },
        {
          id: 2,
          rank: 2,
          title: '【英雄联盟】S14全球总决赛精彩集锦，T1战队夺冠瞬间回顾',
          views: '157万',
          trend: 'stable',
          changeCount: 0,
          duration: '10:45',
          author: '电竞解说',
          category: '电竞',
          hotTag: '赛事',
        },
        {
          id: 3,
          rank: 3,
          title: '【原神】4.4版本新角色「若陀龙王」详细攻略，技能连招教学',
          views: '125万',
          trend: 'up',
          changeCount: 1,
          duration: '12:30',
          author: '原神攻略组',
          category: '游戏',
          hotTag: '攻略',
        },
        {
          id: 4,
          rank: 4,
          title: '【舞蹈】超火《极乐净土》翻跳，专业舞者演绎',
          views: '118万',
          trend: 'new',
          changeCount: 0,
          duration: '3:50',
          author: '舞蹈工作室',
          category: '舞蹈',
          hotTag: '新上榜',
        },
        {
          id: 5,
          rank: 5,
          title: '【AI绘画】零基础入门Midjourney，10分钟学会生成精美插画',
          views: '98万',
          trend: 'down',
          changeCount: 1,
          duration: '20:15',
          author: 'AI创作教室',
          category: 'AI',
          hotTag: '教程',
        },
        {
          id: 6,
          rank: 6,
          title: '【科技】iPhone 16 Pro Max深度评测，对比15 Pro全面升级解析',
          views: '87万',
          trend: 'up',
          changeCount: 3,
          duration: '18:40',
          author: '科技前沿',
          category: '科技',
          hotTag: '数码',
        },
        {
          id: 7,
          rank: 7,
          title: '【美食】30分钟学会米其林级红烧肉，大厨秘方公开',
          views: '75万',
          trend: 'stable',
          changeCount: 0,
          duration: '15:25',
          author: '美食厨房',
          category: '美食',
          hotTag: '美食',
        },
        {
          id: 8,
          rank: 8,
          title: '【电影】《流浪地球3》最新预告解析，剧情走向预测',
          views: '68万',
          trend: 'up',
          changeCount: 2,
          duration: '14:10',
          author: '影视解说',
          category: '电影',
          hotTag: '影视',
        },
        {
          id: 9,
          rank: 9,
          title: '【音乐】周杰伦2024全新专辑《最伟大的作品》解析',
          views: '63万',
          trend: 'down',
          changeCount: 1,
          duration: '12:50',
          author: '音乐评论家',
          category: '音乐',
          hotTag: '音乐',
        },
        {
          id: 10,
          rank: 10,
          title: '【运动】15分钟居家燃脂训练，不用器械也能练出好身材',
          views: '55万',
          trend: 'up',
          changeCount: 5,
          duration: '15:00',
          author: '健身教练Mike',
          category: '运动',
          hotTag: '健身',
        },
      ],
      // 推荐UP主数据
      recommendedUp: [
        {
          id: 1,
          name: '视界无界官方',
          avatar: visionLogo,
          fans: '1000万',
          isOfficial: true,
          isFollowing: false,
          recentWorks: 5,
          coverImage: '/src/assets/悟空.jpg',
          category: '综合',
          level: 9,
          joinDate: '2018-03-15',
          totalViews: '50亿',
          featuredVideo: '【原创】2024年度总结：那些改变世界的科技突破',
          description: '探索科技前沿，解读未来趋势',
          verifiedStatus: '官方认证',
        },
        {
          id: 2,
          name: '游戏解说员',
          avatar: '/src/assets/周杰伦.png',
          fans: '560万',
          isOfficial: true,
          isFollowing: true,
          recentWorks: 8,
          coverImage: '/src/assets/黑悟空.jpg',
          category: '游戏',
          level: 8,
          joinDate: '2019-06-20',
          totalViews: '25亿',
          featuredVideo: '【黑神话：悟空】全流程攻略解说合集',
          description: '专业游戏解说，深度剖析游戏魅力',
          verifiedStatus: '游戏领域创作者',
        },
        {
          id: 3,
          name: '动漫爱好者',
          avatar: '/src/assets/悟空.jpg',
          fans: '420万',
          isOfficial: false,
          isFollowing: false,
          recentWorks: 6,
          coverImage: '/src/assets/周杰伦.png',
          category: '动漫',
          level: 7,
          joinDate: '2020-01-10',
          totalViews: '18亿',
          featuredVideo: '【进击的巨人】最终季深度解析：自由的代价',
          description: '动漫深度解析，带你看懂每一个细节',
          verifiedStatus: '动漫领域优质创作者',
        },
        {
          id: 4,
          name: '美食达人',
          avatar: '/src/assets/黑悟空.jpg',
          fans: '380万',
          isOfficial: true,
          isFollowing: false,
          recentWorks: 12,
          coverImage: '/src/assets/悟空.jpg',
          category: '美食',
          level: 8,
          joinDate: '2019-09-05',
          totalViews: '22亿',
          featuredVideo: '30天学做米其林料理，从入门到精通',
          description: '用简单的食材，做出不简单的味道',
          verifiedStatus: '美食领域创作者',
        },
        {
          id: 5,
          name: '科技前沿',
          avatar: '/src/assets/周杰伦.png',
          fans: '280万',
          isOfficial: true,
          isFollowing: false,
          recentWorks: 7,
          coverImage: '/src/assets/黑悟空.jpg',
          category: '科技',
          level: 7,
          joinDate: '2020-04-22',
          totalViews: '15亿',
          featuredVideo: '【深度】AI如何改变我们的生活方式',
          description: '第一时间解读科技新品，分享前沿科技资讯',
          verifiedStatus: '科技领域创作者',
        },
        {
          id: 6,
          name: '舞蹈工作室',
          avatar: '/src/assets/悟空.jpg',
          fans: '210万',
          isOfficial: true,
          isFollowing: false,
          recentWorks: 9,
          coverImage: '/src/assets/周杰伦.png',
          category: '舞蹈',
          level: 6,
          joinDate: '2020-07-15',
          totalViews: '12亿',
          featuredVideo: '【教程】零基础学街舞，30天速成班',
          description: '专业舞蹈教学，让你成为舞台焦点',
          verifiedStatus: '舞蹈领域创作者',
        },
        {
          id: 7,
          name: '旅行日记',
          avatar: '/src/assets/周杰伦.png',
          fans: '190万',
          isOfficial: false,
          isFollowing: false,
          recentWorks: 4,
          coverImage: '/src/assets/悟空.jpg',
          category: '旅行',
          level: 6,
          joinDate: '2019-12-01',
          totalViews: '8亿',
          featuredVideo: '【Vlog】一人一车，环游中国的365天',
          description: '带你看世界的每一个角落，发现旅行的意义',
          verifiedStatus: '旅行领域优质创作者',
        },
      ],
    }
  },
  
  mounted() {
    
    // 添加滚动事件监听
    window.addEventListener('scroll', this.handleScroll)
    

  },
  
  beforeUnmount() {

    
    // 移除滚动事件监听
    window.removeEventListener('scroll', this.handleScroll)
    

    

  },
  methods: {

    
    // 处理视频点击
    handleVideoClick(videoId) {
      this.router.push(`/video/${videoId}`)
    },
    

    
    handleCarouselClick(link) {
      if (link) {
        this.router.push(link)
      }
    },
    
    // 热门标签切换
    switchHotTab(tabId) {
      this.activeHotTab = tabId
      // 模拟加载数据
      this.loadingStates.hot = true
      setTimeout(() => {
        // 实际项目中这里应该根据tabId请求对应分类的热门视频
        this.loadingStates.hot = false
      }, 800)
    },
    
    // 加载更多视频
    loadMoreVideos(type) {
      this.loadingStates.loadingMore = true
      // 模拟加载更多数据
      setTimeout(() => {
        // 实际项目中这里应该请求更多数据并追加到现有列表
        this.loadingStates.loadingMore = false
      }, 1500)
    },
    
    // 处理更多按钮点击
    handleMoreClick(type) {
      this.router.push(`/videos?type=${type}`)
    },
    
    // 处理标签点击
    handleTagClick(tagName) {
      // 特殊标签处理
      if (tagName === '新番剧') {
        // 跳转到动画界面
        this.router.push('/anime')
      } else if (tagName === '音乐') {
        // 跳转到音乐界面
        this.router.push('/music')
      } else {
        // 其他标签保持原有的搜索功能
        this.router.push(`/search?tag=${encodeURIComponent(tagName)}`)
      }
    },
    
    // 处理排行榜项点击
    handleRankingItemClick(videoId) {
      this.router.push(`/video/${videoId}`)
    },
    
    // 查看完整榜单
    handleViewFullRanking() {
      this.router.push('/ranking')
    },
    
    // 处理UP主点击
    handleUpClick(upId) {
      this.router.push(`/user/${upId}`)
    },
    
    // 关注/取消关注UP主
    handleFollowUp(upId) {
      const up = this.recommendedUp.find(u => u.id === upId)
      if (up) {
        up.isFollowing = !up.isFollowing
        // 实际项目中这里应该调用关注/取消关注的API
      }
    },
    
    // 滚动到顶部
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      })
    },
    
    // 监听滚动事件
    handleScroll() {
      this.showBackToTop = window.scrollY > 500
      
      // 无限滚动加载更多视频
      if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 300 && !this.loadingStates.loadingMore) {
        this.loadMoreVideos('recommended')
      }
    },
    

    
    // 刷新数据
    refreshData() {
      this.loadingStates.refreshing = true
      // 模拟刷新数据
      setTimeout(() => {
        // 这里可以根据需要刷新不同的数据
        this.switchHotTab(this.activeHotTab)
        this.loadingStates.refreshing = false
      }, 1500)
    },
  },
}
</script>
  
  <style scoped>
/* 基础样式重置与容器设置 */
.bilibili-home {
  position: relative;
  min-height: 100vh;
  background-color: #f5f5f5;
  transition: background-color 0.5s ease;
}



/* 背景特效控制按钮 */
.bg-effect-controls {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 100;
}

.bg-effect-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.bg-effect-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.bg-effect-btn:active {
  transform: scale(0.95);
}

/* 轮播图样式增强 */
  .carousel-item {
    position: relative;
    overflow: hidden;
  }
  
  .carousel-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(20px);
    transform: scale(1.1);
    z-index: 1;
  }
  
  .carousel-image {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
  }
  
  .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 30px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    z-index: 3;
  }
  
  .carousel-badge {
    display: inline-block;
    background: #FB7299;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 8px;
    font-weight: bold;
    vertical-align: middle;
  }
  
  .carousel-caption h3 {
    margin: 8px 0 10px 0;
    font-size: 24px;
    font-weight: 600;
  }
  
  .carousel-caption p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
  }
  /* 视频卡片悬停效果增强 */
  .video-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }
  
  /* 加载更多按钮样式优化 */
  .load-more-btn {
    display: inline-block;
    padding: 12px 24px;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 20px auto;
    font-weight: 500;
  }
  
  .load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3);
  }
  
  .load-more-btn:active {
    transform: translateY(0);
  }
  
  /* 排行榜动画效果 */
  .ranking-item {
    transition: all 0.3s ease;
  }
  
  .ranking-item:hover {
    background-color: rgba(0, 123, 255, 0.05);
    transform: translateX(4px);
  }
  
  /* UP主卡片效果 */
  .up-card {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .up-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }
  
  .up-card:hover .up-avatar {
    transform: scale(1.1);
  }
  
  .up-avatar {
    transition: transform 0.3s ease;
  }
  
  /* 返回顶部按钮动画 */
  .back-to-top {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .back-to-top:hover {
    transform: translateY(-2px) scale(1.05);
  }
  
  /* 轮播图指示器动画 */
  .carousel-indicators .indicator {
    transition: all 0.3s ease;
  }
  
  .carousel-indicators .indicator.active {
    background-color: #007bff;
    transform: scale(1.2);
  }
  
  /* 轮播图箭头悬停效果 */
  .carousel-arrow {
    transition: all 0.3s ease;
    opacity: 0.7;
  }
  
  .carousel-arrow:hover {
    opacity: 1;
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.6);
  }
  
  /* 轮播图标题渐入效果 */
  .carousel-caption {
    animation: fadeInUp 0.5s ease-out;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .bg-effect-controls {
      top: 70px;
      right: 15px;
    }
    
    .bg-effect-btn {
      width: 36px;
      height: 36px;
    }
  }
</style>

<style scoped>
.bilibili-home {
  min-height: 100vh;
  background-color: var(--bg-color, #f8f9fa);
}

/* 轮播图样式 */
.carousel-container {
  position: relative;
  width: 100%;
  height: 50vh; /* 轮播图高度为视口的一半 */
  overflow: hidden;
  margin-bottom: 20px; /* 添加底部边距 */
  background-color: #f0f0f0;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.carousel-item.active {
  opacity: 1;
  z-index: 10;
}

.carousel-image {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  height: 100%; /* 确保图片高度与容器相同 */
  object-fit: cover;
  transition: opacity 0.5s ease;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: scale(1.05);
  z-index: 1;
}

.carousel-item.active {
  opacity: 1;
  transform: scale(1);
  z-index: 10;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: #000;
  }

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 40px;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  color: white;
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.carousel-item.active .carousel-caption {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.2s;
}

.carousel-caption h3 {
  font-size: 28px;
  margin-bottom: 8px;
  font-weight: 600;
}

.carousel-caption p {
  font-size: 16px;
  opacity: 0.9;
  max-width: 800px;
}

.carousel-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background-color: #fb7299;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  z-index: 20;
  animation: pulse 2s infinite;
}

/* 轮播图箭头 */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 24px;
  cursor: pointer;
  z-index: 30;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  backdrop-filter: blur(4px);
}

.carousel-wrapper:hover .carousel-arrow {
  opacity: 1;
}

.left-arrow {
  left: 20px;
}

.right-arrow {
  right: 20px;
}

.carousel-arrow:hover {
  background-color: rgba(0, 0, 0, 0.6);
  transform: translateY(-50%) scale(1.1);
}

.carousel-indicators {
  position: absolute;
  bottom: 20px;
  right: 40px;
  display: flex;
  gap: 8px;
  z-index: 20;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator:hover {
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.2);
}

.indicator.active {
  background-color: white;
  width: 24px;
  border-radius: 4px;
  transform: scale(1);
}

/* 主要布局 */
.main-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding: 0 20px;
}

/* 响应式布局调整 - 确保侧边栏在各种屏幕尺寸下都能完全显示 */
@media (max-width: 992px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
    width: 100%;
  }
  
  .hot-tags,
  .ranking-board,
  .recommended-up {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}

/* 左侧内容 */
.content-left {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.video-section {
  background-color: var(--card-bg, #ffffff);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.video-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.section-header h2 {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-color, #18191c);
  position: relative;
  padding-left: 12px;
}

.section-header h2::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background-color: #fb7299;
  border-radius: 2px;
}

.section-more {
  background: none;
  border: none;
  color: var(--text-secondary, #909399);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 16px;
}

.section-more:hover {
  color: #fb7299;
  background-color: #fff0f3;
}

.hot-tabs {
  display: flex;
  gap: 12px;
}

.hot-tab {
  background: none;
  border: none;
  color: var(--text-secondary, #909399);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 16px;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.hot-tab:hover {
  color: var(--text-color, #18191c);
  background-color: #f0f2f5;
}

.hot-tab.active {
  color: white;
  background-color: #fb7299;
}

.hot-tab.active::before {
  opacity: 1;
}

/* 加载更多按钮 */
.section-footer {
  margin-top: 20px;
  text-align: center;
}

.load-more-btn {
  background-color: #f0f2f5;
  color: var(--text-secondary, #909399);
  border: none;
  padding: 8px 24px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.load-more-btn:hover:not(:disabled) {
  background-color: #e6e8eb;
  color: var(--text-color, #18191c);
}

.load-more-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* 右侧边栏 */
.sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hot-tags,
.ranking-board,
.recommended-up {
  background-color: var(--card-bg, #ffffff);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.hot-tags:hover,
.ranking-board:hover,
.recommended-up:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.hot-tags h3,
.ranking-board h3,
.recommended-up h3 {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-color, #18191c);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-item {
  display: inline-block;
  padding: 6px 14px;
  background-color: #f0f2f5;
  color: var(--text-color, #18191c);
  text-decoration: none;
  border-radius: 16px;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.tag-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fb7299;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.tag-item:hover {
  background-color: #fff0f3;
  color: #fb7299;
  transform: translateY(-2px);
}

.tag-item:hover::after {
  transform: scaleX(1);
}

.tag-item.hot {
  background-color: #fff0f3;
  color: #fb7299;
  position: relative;
}

.tag-item.hot::before {
  content: '热门';
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #fb7299;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
}

.tag-item.new {
  border: 1px dashed #409eff;
  background-color: #ecf5ff;
  color: #409eff;
}

.ranking-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-item:hover {
  background-color: #f5f7fa;
  transform: translateX(4px);
}

.ranking-num {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background-color: #f0f2f5;
  color: #909399;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  margin-right: 12px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.ranking-num.top1 {
  background: linear-gradient(135deg, #ff6b81 0%, #ff4757 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(255, 107, 129, 0.3);
}

.ranking-num.top2 {
  background: linear-gradient(135deg, #ff85ad 0%, #ff6b81 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(255, 133, 173, 0.3);
}

.ranking-num.top3 {
  background: linear-gradient(135deg, #ffc0cb 0%, #ff85ad 100%);
  color: white;
  box-shadow: 0 2px 6px rgba(255, 192, 203, 0.3);
}

.ranking-content {
  flex: 1;
  min-width: 0;
}

.ranking-title {
  font-size: 14px;
  color: var(--text-color, #18191c);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.ranking-item:hover .ranking-title {
  color: #ff6b81;
}

.ranking-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #909399;
}

.ranking-author {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: 12px;
  flex-shrink: 0;
}

.ranking-views {
  font-size: 14px;
  font-weight: 600;
  color: #409eff;
}

.ranking-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.ranking-trend.trend-up {
  color: #67c23a;
  background-color: #f0f9eb;
}

.ranking-trend.trend-down {
  color: #f56c6c;
  background-color: #fef0f0;
}

.ranking-trend.trend-stable {
  color: #909399;
  background-color: #f4f4f5;
}

.ranking-trend.trend-new {
  color: #e6a23c;
  background-color: #fdf6ec;
}

.ranking-hot-tag {
  font-size: 10px;
  padding: 2px 6px;
  background-color: #ff6b81;
  color: white;
  border-radius: 10px;
  font-weight: 500;
}

.ranking-more {
  display: block;
  text-align: center;
  margin-top: 16px;
  color: #409eff;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 8px 0;
  border-radius: 6px;
}

.ranking-more:hover {
  color: #66b1ff;
  background-color: #ecf5ff;
}

.up-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.up-item {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.up-item:hover .up-card {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.up-card {
  background-color: #fafafa;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.up-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.up-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-right: 16px;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.up-item:hover .up-avatar {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.up-basic-info {
  flex: 1;
  min-width: 0;
}

.up-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-color, #18191c);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.3s ease;
}

.up-item:hover .up-name {
  color: #409eff;
}

.official-badge {
  color: #409eff;
  font-size: 14px;
}

.up-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.up-fans {
  font-size: 13px;
  color: var(--text-secondary, #909399);
  font-weight: 500;
}

.up-category {
  font-size: 12px;
  color: #606266;
  background-color: #f0f2f5;
  padding: 2px 8px;
  border-radius: 10px;
}

.up-level {
  font-size: 12px;
  color: #e6a23c;
  font-weight: 600;
  background-color: #fdf6ec;
  padding: 2px 8px;
  border-radius: 10px;
}

.follow-btn {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

.follow-btn:hover {
  background-color: #66b1ff;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.follow-btn.following {
  background-color: #f0f2f5;
  color: #909399;
  box-shadow: none;
}

.follow-btn.following:hover {
  background-color: #f56c6c;
  color: white;
  box-shadow: 0 2px 6px rgba(245, 108, 108, 0.3);
}

/* 响应式设计增强 */
@media (max-width: 768px) {
  .ranking-stats {
    flex-direction: row;
    gap: 8px;
    align-items: center;
  }
  
  .up-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .up-basic-info {
    width: calc(100% - 80px);
  }
  
  .follow-btn {
    width: 100%;
    text-align: center;
  }
  
  .up-meta {
    gap: 8px;
  }
  }

.up-content {
  margin-bottom: 12px;
}

.up-description {
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.up-featured {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.featured-label {
  font-weight: 500;
  color: #606266;
  white-space: nowrap;
}

.featured-video {
  color: #409eff;
  font-weight: 500;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.3s ease;
}

.featured-video:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.up-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #909399;
  flex-wrap: wrap;
}

.total-views {
  color: #e6a23c;
  font-weight: 500;
}

.recent-works {
  color: #67c23a;
  font-weight: 500;
}

.verified-status {
  color: #409eff;
  font-weight: 500;
  background-color: #ecf5ff;
  padding: 2px 8px;
  border-radius: 10px;
}

/* 排行榜样式容器 */
.ranking-board {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ranking-board h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-color, #18191c);
  position: relative;
  padding-bottom: 8px;
}

.ranking-board h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #ff6b81 0%, #ff85ad 100%);
  border-radius: 3px;
}

/* 推荐UP主容器样式 */
.recommended-up {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.recommended-up h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-color, #18191c);
  position: relative;
  padding-bottom: 8px;
}

.recommended-up h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #409eff 0%, #66b1ff 100%);
  border-radius: 3px;
}

.follow-btn:hover {
  background-color: #ff7299;
  color: white;
  transform: scale(1.05);
}

.follow-btn.following {
  background-color: #f0f2f5;
  color: #909399;
}

.follow-btn.following:hover {
  background-color: #ff6b81;
  color: white;
}

/* 回到顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fb7299;
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(251, 114, 153, 0.4);
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: #ff6b81;
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(251, 114, 153, 0.5);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-layout {
    grid-template-columns: 1fr 280px;
    gap: 16px;
  }
  
  .carousel-caption h3 {
    font-size: 24px;
  }
}

@media (max-width: 992px) {
  .main-layout {
    grid-template-columns: 1fr;
  }
  
  .sidebar-right {
    display: none;
  }
  
  .carousel-container {
    height: 300px;
  }
  
  .carousel-caption {
    padding: 20px 30px;
  }
  
  .carousel-caption h3 {
    font-size: 20px;
  }
  
  .carousel-indicators {
    right: 30px;
  }
}

@media (max-width: 768px) {
  .carousel-container {
    height: 200px;
  }
  
  .carousel-caption {
    padding: 15px 20px;
  }
  
  .carousel-caption h3 {
    font-size: 18px;
  }
  
  .carousel-caption p {
    font-size: 14px;
  }
  
  .video-section {
    padding: 16px;
  }
  
  .section-header h2 {
    font-size: 18px;
  }
  
  .section-header {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .hot-tabs {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  
  .hot-tabs::-webkit-scrollbar {
    height: 2px;
  }
  
  .carousel-arrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  /* 侧边栏在平板设备上的优化 */
  .sidebar-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
  }
  
  .hot-tags,
  .ranking-board,
  .recommended-up {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 16px;
  }
}

@media (max-width: 576px) {
  .carousel-container {
    height: 160px;
  }
  
  .carousel-caption {
    padding: 12px 16px;
  }
  
  .carousel-caption h3 {
    font-size: 16px;
  }
  
  .carousel-caption p {
    display: none;
  }
  
  .hot-tabs {
    display: none;
  }
  
  .main-layout {
    padding: 0 12px;
  }
  
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  /* 确保移动端侧边栏完全显示 - 强制显示 */
  .sidebar-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 16px;
  }
  
  .hot-tags,
  .ranking-board,
  .recommended-up {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px;
    margin-bottom: 12px;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
}

/* 确保所有屏幕尺寸下侧边栏都能显示 - 添加更低断点 */
@media (max-width: 480px), (max-width: 360px), (max-width: 320px) {
  .main-layout {
    padding: 0 8px;
  }
  
  .sidebar-right {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
  
  .hot-tags,
  .ranking-board,
  .recommended-up {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
}

/* 全局强制显示侧边栏样式 - 应用于所有屏幕尺寸 */
.sidebar-right {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

.hot-tags,
.ranking-board,
.recommended-up {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  transform: none !important;
  max-height: none !important;
  width: 100% !important;
  min-width: 280px !important;
  padding: 16px !important;
  margin-bottom: 16px !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
}

/* 动画效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
